<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { onLoad } from "@dcloudio/uni-app";
import {
	getCurrentDate,
	getCurrentAndPreviousDayUTC,
	millisToDateString,
	millisToUTCString,
	formatUTCDateToCustomFormat,
} from "@/utils/date";
import { Toast } from "@/utils";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

let logCondition = ref({
	/* 机器编号 */
	machineNo: "",
	/* 货道 */
	channelIndex: "",
	/* 页码 */
	pageNum: 1,
	/* 每页显示的记录数量 */
	pageSize: 10,
	/* 起始时间 */
	startTime: "",
	/* 结束时间 */
	endTime: "",
})
/* 货道补货日志列表 */
let logList = ref([]);
let pageCount = ref(0);
/* 起始时间文本 */
let startTimeText = ref("");
/* 结束时间文本 */
let endTimeText = ref("");
/* 是否显示开始日期弹窗 */
let showStartTime = ref(false);
/* 是否显示结束日期弹窗 */
let showEndTime = ref(false);
let logThead = ref(["补货日期", "货道", "补货前", "补货后", "变量", "补货员"])

onLoad((query) => {
	logCondition.value.machineNo = query.machineNo;
})
onMounted(() => {
	startTimeText.value = getCurrentDate();
	endTimeText.value = getCurrentDate();
	logCondition.value.startDate = getCurrentAndPreviousDayUTC().previousUTCDate;
	logCondition.value.endDate = getCurrentAndPreviousDayUTC().currentUTCDate;
	/* 获取货道补货日志 */
	getLogList();
})

/* 上一页/下一页按钮点击事件 */
const handlePageChange = (operation) => {
	if (operation == 'prev') {
		/* 上一页 */
		if (logCondition.value.pageNum == 1) {
			return Toast("已经是首页了!");
		} else {
			logCondition.value.pageNum--;
		}
	} else {
		/* 下一页 */
		if (pageCount.value <= logCondition.value.pageNum) {
			return Toast("已经是尾页了!");
		}
		logCondition.value.pageNum++;
	}
	/* 获取货道补货日志 */
	getLogList();
}

/* 开始时间弹窗确定按钮点击事件 */
const handleStartTimeConfirm = (e) => {
	startTimeText.value = millisToDateString(e.value);
	logCondition.value.startTime = millisToUTCString(e.value);
	/* 关闭开始时间弹窗 */
	showStartTime.value = false;
	/* 获取货道补货日志 */
	getLogList();
}

/* 结束时间弹窗确定按钮点击事件 */
const handleEndTimeConfirm = (e) => {
	endTimeText.value = millisToDateString(e.value);
	logCondition.value.endDate = millisToUTCString(e.value);
	/* 关闭结束时间弹窗 */
	showEndTime.value = false;
	/* 获取货道补货日志 */
	getLogList();
}

/* 查询按钮点击事件 */
const handleSearch = () => {
	logList.value = [];
	/* 获取货道补货日志 */
	getLogList();
}

/* 导出按钮点击事件 */
const handleExport = () => {
	
}

/* 获取货道补货日志 */
const getLogList = () => {
	request({
		url: `${ApiUrl.MachineUrl}/log?pageNum=${logCondition.value.pageNum}&pageSize=${logCondition.value.pageSize}`,
		method: "post",
		data: {
			...logCondition.value
		}
	}).then(res => {
		if (res.status == 0) {
			logList.value = res.data.list;
			pageCount.value = res.data.pages;
		} else {
			Toast(res.msg || "网络异常", "error");
		}
	})
}

/* 监听机器编号 */
watch(() => logCondition.value.machineNo, (val) => {
	if (!val) {
		/* 获取货道补货日志 */
		getLogList();
	}
})

/* 监听机器编号 */
watch(() => logCondition.value.channelIndex, (val) => {
	if (!val) {
		/* 获取货道补货日志 */
		getLogList();
	}
})
</script>

<template>
	<view class="order_history">
		<view class="query_box">
			<view class="form_item">
				<view class="label">机器编号</view>
				<input v-model="logCondition.machineNo" disabled placeholder-class="placeholder"/>
			</view>
			<view class="form_item">
				<view class="label">货道</view>
				<input v-model="logCondition.channelIndex" type="number" maxlength="6" placeholder-class="placeholder" placeholder="请输入货道编号" />
			</view>
			<view class="form_item" @click="showStartTime = true">
				<view class="label">起始时间</view>
				<text>{{ startTimeText }}</text>
				<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
			<view class="form_item" @click="showEndTime = true">
				<view class="label">结束时间</view>
				<text>{{ endTimeText }}</text>
				<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
			<view class="btns">
				<view @click="handleExport">导出</view>
				<view class="btn_query" @click="handleSearch">查询</view>
			</view>
		</view>
		
		<view class="order_list">
			<view class="order_thead">
				<view class="order_thead_item" :class="[`thead${index + 1}`]" v-for="(item, index) in logThead" :key="index">{{ item }}</view>
			</view>
			<block v-if="logList.length > 0">
				<view class="order_item" v-for="(item, index) in logList" :key="item.id">
					<text>{{ formatUTCDateToCustomFormat(item.createTime, 2) }}</text>
					<text>{{ item.channelIndex }}</text>
					<text>{{ item.before }}</text>
					<text>{{ item.after }}</text>
					<text>{{ item.variable }}</text>
					<text>{{ item.userName }}</text>
				</view>
			</block>
			<view v-else class="no_data">暂无数据</view>
		</view>
		<view v-if="logList.length > 0" class="page_button">
			<view @click="handlePageChange('prev')">上一页</view>
			<view @click="handlePageChange('next')">下一页</view>
		</view>
		<!-- 开始时间弹窗 -->
		<u-datetime-picker
			:show="showStartTime"
			v-model="startDateText"
			mode="date"
			@cancel="showStartTime = false"
			@confirm="handleStartTimeConfirm" />
		<!-- 结束时间弹窗 -->
		<u-datetime-picker
			:show="showEndTime"
			v-model="endTimeText"
			mode="date"
			@cancel="showEndTime = false"
			@confirm="handleEndTimeConfirm" />
	</view>
</template>

<style lang='scss'>
.order_history {
	background: #F8F9FB;
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	padding-bottom: 140rpx;
	.query_box {
		box-sizing: border-box;
		padding: 0 32rpx;
		width: 100%;
		background: #ffffff;
		margin-bottom: 24rpx;
		.form_item {
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 28rpx 0;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3D3D;
				line-height: 33rpx;
				margin-right: 28rpx;
			}
			input {
				font-size: 28rpx;
				color: #B6BDBD;
				line-height: 33rpx;
				background: none;
				border: none;
				border-radius: none;
				outline: none;
			}
			.placeholder {
				color: #B6BDBD;
			}
			text {
				display: inline-block;
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				color: #B6BDBD;
				line-height: 33rpx;
			}
			image {
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
			.select {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: flex-end;
				color: #B6BDBD;
				font-size: 28rpx;
			}
		}
		.order_info {
			width: 100%;
			padding: 24rpx 0 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view {
				font-size: 24rpx;
				color: #FF6619;
				line-height: 32rpx;
			}
		}
		.btns {
			width: 100%;
			height: 112rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 30rpx;
			view {
				width: 152rpx;
				height: 64rpx;
				border-radius: 32rpx;
				border: 2rpx solid #FF776A;
				font-size: 28rpx;
				color: #FF4638;
				line-height: 33rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				&.btn_query {
					background: linear-gradient( 129deg, #FF776A 0%, #FF4638 100%);
					border: none;
					color: #ffffff;
				}
			}
		}
	}
	.order_list {
		.order_thead {
			width: 750rpx;
			height: 64rpx;
			background: #FF766C;
			display: flex;
			box-sizing: border-box;
			padding: 18rpx 0;
			.order_thead_item {
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:not(:last-child) {
					border-right: 4rpx solid #FFE5E5;
				}
				&.thead1 {
					width: 180rpx;
				}
				&.thead2,
				&.thead3,
				&.thead4,
				&.thead5 {
					width: 110rpx;
				}
				&:last-child {
					flex: 1;
				}
			}
		}
		.order_item {
			width: 750rpx;
			height: 64rpx;
			background: #FFFFFF;
			font-size: 20rpx;
			color: #3B3D3D;
			box-sizing: border-box;
			display: flex;
			&:nth-child(odd) {
				background: #FFF3F2;
			}
			text {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				&:nth-of-type(1) {
					width: 180rpx;
				}
				&:nth-of-type(2),
				&:nth-of-type(3),
				&:nth-of-type(4),
				&:nth-of-type(5) {
					width: 110rpx;
				}
				&:last-child {
					flex: 1;
				}
			}
			.operation {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				font-weight: bold;
				color: #25DFA5;
				text {
					&:nth-child(2) {
						color: #FF4638;
						margin-left: 20rpx;
					}
				}
			}
		}
		.no_data {
			width: 750rpx;
			height: 64rpx;
			background: #FFFFFF;
			font-size: 20rpx;
			color: #3B3D3D;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.page_button {
		margin: 40rpx 73rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			width: 282rpx;
			height: 60rpx;
			border-radius: 40rpx;
			border: 2rpx solid #FF776A;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #FF4638;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.refund_popup,
	.update_password_popup {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 40rpx 0 0;
		.refund_row {
			font-size: 24rpx;
			line-height: 28rpx;
			color: #999999;
			padding: 0 0 0 60rpx;
			margin-bottom: 16rpx;
			&.reason {
				margin-bottom: 28rpx;
				display: flex;
				align-items: center;
				input {
					flex: 1;
				}
			}
			.reason_placeholder {
				color: #999999;
				font-size: 24rpx;
			}
		}
		
	}
	.update_password_popup {
		input {
			height: 64rpx;
			margin: 0 60rpx 28rpx;
			font-size: 24rpx;
			line-height: 28rpx;
			color: #999999;
			border: 2rpx solid rgba(#999999, 0.5);
			box-sizing: border-box;
			padding: 0 20rpx;
			text-align: center;
		}
	}
	.popup {
		.title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
			margin-bottom: 22rpx;
		}
		.footer {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			view {
				height: 100%;
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					color: #FF4638;
					border-left: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
</style>